<template>
  <div class="forum-container">
    <el-button type="primary" icon="el-icon-plus" @click="showCreateDialog">
      发帖
    </el-button>

    <div class="post-list">
      <el-card v-for="post in posts" :key="post.id" class="post-item" @click.native="goToDetail(post.id)">
        <div class="post-header">
          <el-avatar :src="'/api/file/get/' + post.userAvatar"></el-avatar>
          <div class="post-info">
            <div class="post-title">{{ post.title }}</div>
            <div class="post-meta">
              {{ post.username }} · {{ formatTime(post.createdAt) }}
            </div>
          </div>
        </div>
        
        <div class="post-content">{{ post.content }}</div>
        
        <el-image 
          v-if="post.imageUrl" 
          :src="`/api/file/get/${post.imageUrl}`"
          fit="cover"
          class="post-image"
        ></el-image>
        
        <div class="post-footer">
          <span>{{ post.commentCount }} 条评论</span>
        </div>
      </el-card>
    </div>

    <el-pagination
      @current-change="handlePageChange"
      :current-page.sync="currentPage"
      :total="total"
      :page-size="10"
      layout="prev, pager, next"
      class="pagination"
    ></el-pagination>

    <!-- 发帖对话框 -->
    <el-dialog title="发帖" :visible.sync="dialogVisible" width="500px">
      <el-form :model="postForm" ref="postForm" :rules="rules">
        <el-form-item prop="title" label="标题">
          <el-input v-model="postForm.title" placeholder="请输入标题"></el-input>
        </el-form-item>
        
        <el-form-item prop="content" label="内容">
          <el-input type="textarea" v-model="postForm.content" rows="4" placeholder="请输入内容"></el-input>
        </el-form-item>
        
        <el-form-item label="图片">
          <el-upload
            class="upload-demo"
            action="/api/file/upload"
            :on-success="handleUploadSuccess"
            :limit="1"
          >
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      
      <div slot="footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitPost">发布</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { formatTime } from '@/utils/time'
import request from '@/utils/request'   
export default {
  name: 'ForumList',
  data() {
    return {
      posts: [],
      total: 0,
      currentPage: 1,
      dialogVisible: false,
      postForm: {
        title: '',
        content: '',
        imageUrl: ''
      },
      rules: {
        title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
        content: [{ required: true, message: '请输入内容', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.fetchPosts()
  },
  methods: {
    formatTime,
    async fetchPosts() {
      try {
        const res = await request.get(`/api/forum/posts?page=${this.currentPage}&size=10`)
        this.posts = res.data.records
        this.total = res.data.total
      } catch (error) {
        this.$message.error('获取帖子列表失败')
      }
    },
    handlePageChange(page) {
      this.currentPage = page
      this.fetchPosts()
    },
    showCreateDialog() {
      this.dialogVisible = true
      this.postForm = { title: '', content: '', imageUrl: '' }
    },
    handleUploadSuccess(res) {
      this.postForm.imageUrl = res.data
      this.$message.success('上传成功')
    },
    async submitPost() {
      try {
        await this.$refs.postForm.validate()
        await request.post('/api/forum/posts', this.postForm)
        this.$message.success('发帖成功')
        this.dialogVisible = false
        this.currentPage = 1
        this.fetchPosts()
      } catch (error) {
        this.$message.error('发帖失败')
      }
    },
    goToDetail(id) {
      this.$router.push(`/forum/post/${id}`)
    }
  }
}
</script>

<style scoped>
.forum-container {
  padding: 20px;
}
.post-list {
  margin-top: 20px;
}
.post-item {
  margin-bottom: 20px;
  cursor: pointer;
}
.post-header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.post-info {
  margin-left: 10px;
}
.post-title {
  font-size: 16px;
  font-weight: bold;
}
.post-meta {
  font-size: 12px;
  color: #999;
  margin-top: 5px;
}
.post-content {
  margin: 10px 0;
}
.post-image {
  max-width: 300px;
  border-radius: 4px;
}
.post-footer {
  margin-top: 10px;
  color: #999;
  font-size: 12px;
}
.pagination {
  margin-top: 20px;
  text-align: center;
}
</style> 